<template>
  <div class="loading-container text-center" :class="{ 'py-5': size === 'large' }">
    <div class="spinner-border" :class="spinnerClass" role="status">
      <span class="visually-hidden">加载中...</span>
    </div>
    <p v-if="message" class="mt-2">{{ message }}</p>
    <p v-if="submessage" class="text-muted small">{{ submessage }}</p>
  </div>
</template>

<script>
export default {
  name: 'LoadingSpinner',
  props: {
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    },
    color: {
      type: String,
      default: 'primary',
      validator: (value) => ['primary', 'secondary', 'success', 'danger', 'warning', 'info'].includes(value)
    },
    message: {
      type: String,
      default: ''
    },
    submessage: {
      type: String,
      default: ''
    }
  },
  computed: {
    spinnerClass() {
      const sizeClass = {
        small: 'spinner-border-sm',
        medium: '',
        large: 'text-center'
      };
      
      return `${sizeClass[this.size]} text-${this.color}`;
    }
  }
}
</script>

<style scoped>
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style> 